<!-- 点位信息列表信息 -->
<template>
  <div class="q-pa-md bg-white" style="height: 760px;">
    <div class="row q-mb-md">
      <div style="width: 230px" class="q-mt-xs q-mr-sm" >
        <q-select dense options-dense outlined v-model="headerSeach" :options="deviceNameOptions" />
      </div>
      <div v-show="headerSeach" style="width: 200px" class="q-mr-sm q-mt-xs">
        <q-input  outlined v-model="queryList[seachContent[headerSeach]]" dense />
      </div>
      <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated icon="search" padding="8px 8px 7px" color="primary" label="搜索" @click="handlerSearch" />
      <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated color="primary" padding="8px 8px 7px" label="复位搜索" @click="handleResetSearch" />
      <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated color="primary" padding="8px 8px 7px" label="添加关注" @click="dialogTableVisible = true" />
    </div>
    <q-markup-table flat class="relative-position">
      <thead>
        <th v-for="column in columns" :key="column.name" :class="column.align">
          {{ column.label }}
          <q-icon v-if="column.isSort" class="cursor-pointer" size="18px" :name="descending?'expand_less':'expand_more'" @click="handlerSort" />
        </th>
        <th class="text-center">操作</th>
      </thead>
      <tbody>
        <div v-if="loading">
          <q-inner-loading showing color="grey" />
        </div>
        <tr v-for="row in dataList" :key="row.id">
          <td v-for="column in columns" :key="column.name" :class="column.align">
            <span v-if="!column.isImg">{{ row[column.name] }}</span>
            <span v-else>
              <img style="height: 28px;" :src="row[column.name]" alt="暂无图片">
            </span>
          </td>
          <td class="text-center">
            <DetailBtn @click="handlerDetailSensor(props.row)" />
            <DeleteBtn :btnTitle="'取消关注'" @click="handleDelete(props.row)" />
          </td>
        </tr>
      </tbody>
    </q-markup-table>
  </div>

  <!-- 详情 提示框 -->
  <DetailDialog :isShowDetail="isShowDetail" :detailList="detailList" :titleName="'点位信息详情'" @closeDetail="closeDetail" :msg="detailMsg" />
  <!-- 删除 提示框 -->
  <DeleteDialog :isShowDelete="isShowDelete" :tipInfo="titelCancel[tipInfo]" @closeDeleteDialog="closeDeleteDialog" @confirmDelete="confirmDelete()" />
  <!-- 信息详情 -->
  <q-dialog v-model="dialogSiteVisible">
    <SiteInfoDialog @selectedEvent="selectedEvent" @closeDialog="closeDialog" />
  </q-dialog>
</template>

<script>
import { ref } from 'vue'
import DetailDialog from 'src/components/detailDialog/index'
import DeleteDialog from 'src/components/deleteDialog/index'
import SiteInfoDialog from 'src/pages/common/siteInfoDialog'
import { detailSiteInfo} from 'src/api/siteMonitor'
import { setSiteConcerns, fetchSiteConPerson } from 'src/api/systemtWarning'
import hosts from 'src/utils/host.js'
import { mapGetters } from 'vuex';
import DetailBtn from 'src/components/btnCom/detailBtn'
import DeleteBtn from 'src/components/btnCom/deleteBtn'

const labelArr = {
  'id': 'ID',
  'sn': '点位编号',
  'alias_name': '点位名称',
  'type': '点位类型',
  'equip_id_sn': '隶属于资产',
  'dev_id_sn': '关联传感器',
  'img': '点位图片',
  'is_active': '是否激活',
  'modify_time': '修改时间',
  'create_time': '创建时间'
}
export default {
  data () {
    return {
      dataList: [],
      filter: ref(''),

      columns: [
        { name: 'idIndex', required: true, label: 'ID', align: 'text-center',field: 'idIndex', isSort: true, isImg: false},
        { name: 'point_img', align: 'text-center', label: '点位图片', field: 'point_img', isImg: true },
        { name: 'point_name', align: 'text-center', label: '点位名称', field: 'point_name', isImg: false},
        { name: 'point_sn', required: true, label: '点位编号', align: 'text-center',field: 'point_sn', isImg: false},
      ],

      // 表格头部
      headerSeach: ref(),
      deviceNameOptions: ['', '点位名称', '点位编号'],
       // 右侧表头选择
      visibleColumns: ref([]),
      queryList: {
        ordering: 'id'
      },
      loading: false,
      isShowDetail: false,
      dialogSiteVisible: false,
      detailList: [],
      detailMsg: '',
      seachContent: {
        '点位ID' : 'point_id',
        '点位名称' : 'point_name',
        '点位编号' : 'point_sn'
      },
      siteId: null,
      isShowDelete: false,
      tipInfo: 'concern',
      titelCancel: {
        concern: '确定关注该监测点位吗？',
        cancel: '确定取消该监测点位吗？'
      },
      descending: false
    }
  },

  components: {
    DetailDialog,
    DeleteDialog,
    SiteInfoDialog,
    DetailBtn,
    DeleteBtn
  },
  computed: {
    ...mapGetters(['themeColor'])
  },

  watch: {
  },
  beforeCreate() {
  },
  mounted() {
    this.handleSelect()
    this.feathOranizerList()
  },

  methods: {
    // 刷新
    handlerRefresh() {
      this.handleResetSearch()
    },
    /**
     * 搜索
     */
    handlerSearch() {
      this.feathOranizerList()
    },
    /**
     * 复位搜索
     */
    handleResetSearch() {
      this.queryList = {
        ordering: 'id',
        concerns_uid: localStorage.getItem("user_id_GFYW")
      }
      this.headerSeach = ''
      this.feathOranizerList()
    },
    /**
     * 获取资产信息的列表
     */
    feathOranizerList() {
      this.loading = true
      this.queryList.ordering = 'id'
      this.queryList.concerns_uid = localStorage.getItem("user_id_GFYW")

      fetchSiteConPerson(this.queryList).then(res => {
        const {status, data, totalCounts} = res
        if (status === 200) {
          this.dataList = []
          if (data && data.length > 0) {
            data.forEach((item, index) => {
              // 图片路径
              if (item.point_img && item.point_img.indexOf('http://') < 0) {
                if (item.point_img.split('/')[0] === '') item.point_img = item.point_img.substr(1, item.point_img.length-1)
                item.point_img = hosts + item.point_img
              }
              if (this.queryList.ordering === 'id') {
                item.idIndex = index + 1
              } else {
                item.idIndex = data.length - index
              }
              this.dataList.push(item)
            });
          }
        }
        this.loading = false
      }).catch(_ => {
        this.loading = false
      })
    },
    /**
     * 详情
     */
    handlerDetailSensor(val) {
      if (val) {
        detailSiteInfo(val.id).then(res => {
          this.detailList = []
          const {data, status, msg} = res
          if (status === 200) {
            if (data.dev_base_id) {
              this.detailList.push({
                label: 'ID',
                key: data.dev_base_id.id
              })
            }
            if (data.msg) {
              this.detailMsg = data.msg
              this.detailList = []
            } else {
              this.deepDetailData(data, labelArr)
            }
          } else {
            this.$q.notify({
              type: 'warning',
              message: msg
            })
          }
        })
      }
      this.isShowDetail = true
    },
    // 递归详情数据
    deepDetailData(data, labelArr) {
      if (data) {
        for (let key in data) {
          if (labelArr[key]) {
            if (labelArr[key].indexOf('时间') >= 0) {
              let copyTime = ''
              if (data[key]) copyTime = data[key].substr(0, 10) + ' ' + data[key].substr(11,8)
              this.detailList.push({
                label: labelArr[key],
                key: copyTime
              })
            } else if (labelArr[key].indexOf('点位图片') >= 0) {
              let img = ''
              if (data[key].indexOf(hosts) < 0) {
                if (data[key].split('/')[0] === '') data[key] = data[key].substr(1, data[key].length-1)
                img = hosts + data[key]
              } else {
                img = data[key]
              }
              this.detailList.push({
                label: labelArr[key],
                img: img
              })
            } else {
              this.detailList.push({
                label: labelArr[key],
                key: data[key]
              })
            }
          }
        }
      }
    },
    /**
     * 关闭详情提示框
     */
    closeDetail() {
      this.isShowDetail = false
    },
    /**
     * 处理数据
     */
    handleSelect() {
      this.visibleColumns = []
      this.columns.forEach((item, index) => {
        if (index < 6) {
          this.visibleColumns.push(item.name)
        }
      })
    },
     /**
     * 取消关注
     */
    handleDelete(val) {
      this.pointInfo = Object.assign({}, val)
      this.isShowDelete = true
      this.tipInfo = 'cancel'
      if (val) {
        this.cancalQuery = {
          concerns_uid: val.concerns_uid
        }
      }
    },
    /**
     * 资产 - 确定取消关注
     */
    confirmDelete() {
      let queryTemp = {}
      if (!this.pointInfo) return
      queryTemp.point_id = this.pointInfo.point_id
      queryTemp.is_concerns = false
      queryTemp.concerns_uid = localStorage.getItem('user_id_GFYW')

      setSiteConcerns(queryTemp).then(res => {
        const {status, msg} = res
        if (status === 200) {
          this.isShowDelete = false
          this.feathOranizerList()
          this.$q.notify({
            type: 'positive',
            position: 'top',
            message: `已取消关注！`
          })
        } else {
          this.$q.notify({
            type: 'positive',
            position: 'top',
            message: msg
          })
        }
      })
    },
    /**
     * 关闭删除提示框
     */
    closeDeleteDialog() {
      this.isShowDelete = false
    },
     /**
     * 选择一条监测点位信息
     */
    selectedEvent(selection) {
      if (selection[0].id) {
        let queryTemp = {}
        queryTemp.point_id = selection[0].id
        queryTemp.is_concerns = true
        queryTemp.concerns_uid = localStorage.getItem('user_id_GFYW')

        setSiteConcerns(queryTemp).then(res => {
          this.dialogSiteVisible = false
          if (res.status === 200) {
            this.feathOranizerList()
            this.$q.notify({
              type: 'positive',
              position: 'top',
              message: '添加成功！'
            })
          }
        })
      }
    },
    /**
     * 关闭对话框
     */
    closeDialog(bool) {
      this.dialogSiteVisible = false
    },
    /**
     * 排序
     */
    handlerSort() {
      this.descending = !this.descending
      this.dataList.reverse()
    }
  }
}

</script>
<style lang='scss' scoped>
// 固定操作列
.my-sticky-column-table {
  tr:first-child {
    th:last-child {
      background: #fff;
    }
  }
  td {
    &:last-child {
      background: #fff;
    }
  }
  th:last-child, td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
  }
}
// 弹出的对话框样式
.dialog-form-container {
  ul {
    li {
      height: 42px;
      line-height: 42px;
      white-space: nowrap;
      margin-bottom: 30px;
      >span {
        &:first-child {
          display: inline-block;
          width: 150px;
          margin-right: 5px;
        }
        &:last-child {
          display: inline-block;
          width: 200px;
          >.q-input {
            width: 200px;
          }
        }
      }
    }
  }
}

.click-row {
  background-color: rgba(0,0,0,0.06) !important;
}
</style>
